<!DOCTYPE html><html><head>
      <title>打包压缩配置</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Administrator\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.18\crossnote\dependencies\katex\katex.min.css">
      
      
      <script type="text/javascript" src="file:///c:\Users\Administrator\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.18\crossnote\dependencies\mermaid\mermaid.min.js" charset="UTF-8"></script>
      
      
      <style>
      code[class*=language-],pre[class*=language-]{color:#333;background:0 0;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.4;-moz-tab-size:8;-o-tab-size:8;tab-size:8;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:.8em;overflow:auto;border-radius:3px;background:#f5f5f5}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal;background:#f5f5f5}.token.blockquote,.token.comment{color:#969896}.token.cdata{color:#183691}.token.doctype,.token.macro.property,.token.punctuation,.token.variable{color:#333}.token.builtin,.token.important,.token.keyword,.token.operator,.token.rule{color:#a71d5d}.token.attr-value,.token.regex,.token.string,.token.url{color:#183691}.token.atrule,.token.boolean,.token.code,.token.command,.token.constant,.token.entity,.token.number,.token.property,.token.symbol{color:#0086b3}.token.prolog,.token.selector,.token.tag{color:#63a35c}.token.attr-name,.token.class,.token.class-name,.token.function,.token.id,.token.namespace,.token.pseudo-class,.token.pseudo-element,.token.url-reference .token.variable{color:#795da3}.token.entity{cursor:help}.token.title,.token.title .token.punctuation{font-weight:700;color:#1d3e81}.token.list{color:#ed6a43}.token.inserted{background-color:#eaffea;color:#55a532}.token.deleted{background-color:#ffecec;color:#bd2c00}.token.bold{font-weight:700}.token.italic{font-style:italic}.language-json .token.property{color:#183691}.language-markup .token.tag .token.punctuation{color:#333}.language-css .token.function,code.language-css{color:#0086b3}.language-yaml .token.atrule{color:#63a35c}code.language-yaml{color:#183691}.language-ruby .token.function{color:#333}.language-markdown .token.url{color:#795da3}.language-makefile .token.symbol{color:#795da3}.language-makefile .token.variable{color:#183691}.language-makefile .token.builtin{color:#0086b3}.language-bash .token.keyword{color:#0086b3}pre[data-line]{position:relative;padding:1em 0 1em 3em}pre[data-line] .line-highlight-wrapper{position:absolute;top:0;left:0;background-color:transparent;display:block;width:100%}pre[data-line] .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}pre[data-line] .line-highlight:before,pre[data-line] .line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}pre[data-line] .line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}html body{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ol,html body>ul{margin-bottom:16px}html body ol,html body ul{padding-left:2em}html body ol.no-list,html body ul.no-list{padding:0;list-style-type:none}html body ol ol,html body ol ul,html body ul ol,html body ul ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:700;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::after,html body code::before{letter-spacing:-.2em;content:'\00a0'}html body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:0 0;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:after,html body pre code:before,html body pre tt:after,html body pre tt:before{content:normal}html body blockquote,html body dl,html body ol,html body p,html body pre,html body ul{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body code,html body pre{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview ul{list-style:disc}.markdown-preview ul ul{list-style:circle}.markdown-preview ul ul ul{list-style:square}.markdown-preview ol{list-style:decimal}.markdown-preview ol ol,.markdown-preview ul ol{list-style-type:lower-roman}.markdown-preview ol ol ol,.markdown-preview ol ul ol,.markdown-preview ul ol ol,.markdown-preview ul ul ol{list-style-type:lower-alpha}.markdown-preview .newpage,.markdown-preview .pagebreak{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center!important}.markdown-preview:not([data-for=preview]) .code-chunk .code-chunk-btn-group{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .status{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0;min-height:100vh}@media screen and (min-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{font-size:14px!important;padding:1em}}@media print{html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc{padding:0 16px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div,html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% - 300px);padding:2em calc(50% - 457px - 300px / 2);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
      <!-- The content below will be included at the end of the <head> element. --><script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    // your code here
  });
</script></head><body for="html-export">
    
    
      <div class="crossnote markdown-preview  ">
      
<pre data-role="codeBlock" data-info="markdown" class="language-markdown markdown"><code><span class="token title important"><span class="token punctuation">#</span> 🚀 Vue3 + Vite 生产构建极致优化指南</span>

<span class="token blockquote punctuation">&gt;</span> 最后更新：2024-01 | <span class="token url">[<span class="token content">完整示例项目</span>](<span class="token url">https://github.com/vite-optimization-demo</span>)</span>  
<span class="token blockquote punctuation">&gt;</span> 推荐使用 Vite 4.3+ | Node 18+

<span class="token hr punctuation">---</span>

<span class="token title important"><span class="token punctuation">##</span> 📦 目录</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">一、基础构建优化</span>](<span class="token url">#一基础构建优化</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">二、静态资源优化</span>](<span class="token url">#二静态资源优化</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">三、代码极致压缩</span>](<span class="token url">#三代码极致压缩</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">四、智能代码分割</span>](<span class="token url">#四智能代码分割</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">五、高级优化方案</span>](<span class="token url">#五高级优化方案</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">六、性能监控分析</span>](<span class="token url">#六性能监控分析</span>)</span>
<span class="token list punctuation">-</span> <span class="token url">[<span class="token content">七、优化注意事项</span>](<span class="token url">#七优化注意事项</span>)</span>

<span class="token hr punctuation">---</span>

<span class="token title important"><span class="token punctuation">##</span> &lt;span id="一基础构建优化"&gt;一、基础构建优化&lt;/span&gt;</span>

<span class="token title important"><span class="token punctuation">###</span> 1.1 现代构建模式</span>
```javascript
// vite.config.js
export default defineConfig({
  build: {
    target: 'esnext',      // 🌈 现代浏览器支持
    cssTarget: 'chrome85', // 🎯 CSS编译目标
    modulePreload: { 
      polyfill: false      // 🚫 禁用过时polyfill
    }
  }
})
</code></pre><h3>1.2 构建参数优化</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">reportCompressedSize</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token comment">// 📉 关闭冗余体积报告</span>
  <span class="token literal-property property">chunkSizeWarningLimit</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span>  <span class="token comment">// ⚠️ 调整块体积警告阈值</span>
  <span class="token literal-property property">sourcemap</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span> <span class="token comment">// 🗺️ 按环境控制sourcemap</span>
<span class="token punctuation">}</span>
</code></pre><hr>
<h2><span id="二静态资源优化">二、静态资源优化</span></h2>
<h3>2.1 🖼️ 图片处理三剑客</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// 安装插件</span>
npm install vite<span class="token operator">-</span>plugin<span class="token operator">-</span>imagemin @squoosh<span class="token operator">/</span>lib <span class="token operator">-</span><span class="token constant">D</span>

<span class="token comment">// 配置示例</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports">viteImagemin</span> <span class="token keyword module keyword-from">from</span> <span class="token string">'vite-plugin-imagemin'</span>

<span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">viteImagemin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">jpeg</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">quality</span><span class="token operator">:</span> <span class="token number">85</span><span class="token punctuation">,</span>          <span class="token comment">// 📈 JPEG质量系数</span>
        <span class="token literal-property property">mozjpeg</span><span class="token operator">:</span> <span class="token boolean">true</span>         <span class="token comment">// 🔥 启用MozJPEG引擎</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">png</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">quality</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">0.9</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 🎚️ PNG质量范围</span>
        <span class="token literal-property property">speed</span><span class="token operator">:</span> <span class="token number">4</span>             <span class="token comment">// ⚡ 压缩速度等级</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">webp</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">lossless</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>       <span class="token comment">// 💎 启用无损压缩</span>
        <span class="token literal-property property">effort</span><span class="token operator">:</span> <span class="token number">6</span>            <span class="token comment">// 💪 压缩强度</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><h3>2.2 🗜️ 智能压缩策略</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// Gzip + Brotli 双模式</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports">viteCompression</span> <span class="token keyword module keyword-from">from</span> <span class="token string">'vite-plugin-compression'</span>

<span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">viteCompression</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">algorithm</span><span class="token operator">:</span> <span class="token string">'gzip'</span><span class="token punctuation">,</span> 
      <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">10240</span><span class="token punctuation">,</span>      <span class="token comment">// 📏 10KB起压缩</span>
      <span class="token literal-property property">filter</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(js|css|html|svg)$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">viteCompression</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">algorithm</span><span class="token operator">:</span> <span class="token string">'brotliCompress'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">ext</span><span class="token operator">:</span> <span class="token string">'.br'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">compressionOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">level</span><span class="token operator">:</span> <span class="token number">11</span> <span class="token punctuation">}</span> <span class="token comment">// 🚀 最高压缩等级</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><h3>2.3 🔄 动态资源转换</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">assetsInlineLimit</span><span class="token operator">:</span> <span class="token number">8192</span><span class="token punctuation">,</span>   <span class="token comment">// 🎯 8KB以下转base64</span>
  <span class="token literal-property property">rollupOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">assetFileNames</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">assets/[name]-[hash][extname]?v=[hash:8]</span><span class="token template-punctuation string">`</span></span> <span class="token comment">// 🕒 防缓存策略</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><hr>
<h2><span id="三代码极致压缩">三、代码极致压缩</span></h2>
<h3>3.1 💻 JS压缩配置</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">minify</span><span class="token operator">:</span> <span class="token string">'terser'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">terserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">drop_console</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>     <span class="token comment">// 🚫 移除console</span>
      <span class="token literal-property property">pure_funcs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'console.log'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 保留指定日志</span>
      <span class="token literal-property property">passes</span><span class="token operator">:</span> <span class="token number">3</span>               <span class="token comment">// 🔁 多次压缩</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">comments</span><span class="token operator">:</span> <span class="token string">'some'</span>        <span class="token comment">// 📝 保留特定注释</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h3>3.2 🎨 CSS极致优化</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// postcss.config.js</span>
<span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">stage</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>              <span class="token comment">// 🌈 支持最新特性</span>
      <span class="token literal-property property">features</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'nesting-rules'</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 🌀 CSS嵌套支持</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">preset</span><span class="token operator">:</span> <span class="token string">'advanced'</span>      <span class="token comment">// 🚀 高级压缩模式</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><hr>
<h2><span id="四智能代码分割">四、智能代码分割</span></h2>
<h3>4.1 📦 智能分包策略</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">rollupOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">manualChunks</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>id<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span><span class="token string">'node_modules'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>id<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span><span class="token string">'lodash'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword control-flow keyword-return">return</span> <span class="token string">'lodash'</span> <span class="token comment">// 🔪 单独拆分常用库</span>
          <span class="token keyword control-flow keyword-return">return</span> <span class="token string">'vendor'</span> <span class="token comment">// 📚 第三方依赖包</span>
        <span class="token punctuation">}</span>
        <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>id<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span><span class="token string">'src/components'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword control-flow keyword-return">return</span> <span class="token string">'components'</span> <span class="token comment">// 🧩 UI组件库</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h3>4.2 🧠 依赖预优化</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token literal-property property">optimizeDeps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'vue'</span><span class="token punctuation">,</span>
    <span class="token string">'vue-router'</span><span class="token punctuation">,</span>
    <span class="token string">'pinia'</span><span class="token punctuation">,</span>
    <span class="token string">'axios'</span>          <span class="token comment">// ⚡ 高频依赖预构建</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'vue-demi'</span>       <span class="token comment">// 🚧 排除特殊依赖</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><hr>
<h2><span id="五高级优化方案">五、高级优化方案</span></h2>
<h3>5.1 ⚡ PWA 支持</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// 安装插件</span>
npm install vite<span class="token operator">-</span>plugin<span class="token operator">-</span>pwa workbox<span class="token operator">-</span><span class="token dom variable">window</span> <span class="token operator">-</span><span class="token constant">D</span>

<span class="token comment">// 配置示例</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">VitePWA</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'vite-plugin-pwa'</span>

<span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function"><span class="token maybe-class-name">VitePWA</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">manifest</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'My App'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">theme_color</span><span class="token operator">:</span> <span class="token string">'#ffffff'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">workbox</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">globPatterns</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'**/*.{js,css,html,ico,png,svg}'</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><h3>5.2 🌐 CDN 加速方案</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// vite.config.js</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> createHtmlPlugin <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'vite-plugin-html'</span>

<span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">createHtmlPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">cdnUrl</span><span class="token operator">:</span> <span class="token string">'https://cdn.example.com'</span> <span class="token comment">// 🌍 替换为实际CDN地址</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><pre data-role="codeBlock" data-info="html" class="language-html html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;%- cdnUrl %&gt;/vue@3.3.4/vue.global.prod.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><hr>
<h2><span id="六性能监控分析">六、性能监控分析</span></h2>
<h3>6.1 📊 构建可视化分析</h3>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript javascript"><code><span class="token comment">// 安装插件</span>
npm install rollup<span class="token operator">-</span>plugin<span class="token operator">-</span>visualizer <span class="token operator">-</span><span class="token constant">D</span>

<span class="token comment">// 配置示例</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> visualizer <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'rollup-plugin-visualizer'</span>

<span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token function">visualizer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>       <span class="token comment">// 🖥️ 自动打开报告</span>
      <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'treemap'</span><span class="token punctuation">,</span> <span class="token comment">// 📈 多种图表类型可选</span>
      <span class="token literal-property property">gzipSize</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>   <span class="token comment">// 🗜️ 显示Gzip大小</span>
      <span class="token literal-property property">brotliSize</span><span class="token operator">:</span> <span class="token boolean">true</span>  <span class="token comment">// 🌀 显示Brotli大小</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><h3>6.2 📈 Lighthouse 集成</h3>
<pre data-role="codeBlock" data-info="bash" class="language-bash bash"><code><span class="token comment"># 安装工具 {#安装工具 }</span>
<span class="token function">npm</span> <span class="token function">install</span> lighthouse @lhci/cli <span class="token parameter variable">-D</span>

<span class="token comment"># 执行测试 {#执行测试 }</span>
lhci autorun <span class="token parameter variable">--collect.url</span><span class="token operator">=</span>http://localhost:5000 <span class="token parameter variable">--collect.staticDistDir</span><span class="token operator">=</span>dist
</code></pre><hr>
<h2><span id="七优化注意事项">七、优化注意事项</span></h2>
<h3><span style="color: #ff4757;">⚠️ 重要警告</span></h3>
<ol>
<li>
<p><strong>图片压缩依赖</strong><br>
需要安装原生压缩工具：</p>
<pre data-role="codeBlock" data-info="bash" class="language-bash bash"><code><span class="token comment"># Ubuntu</span>
<span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> <span class="token parameter variable">-y</span> pngquant webp

<span class="token comment"># MacOS</span>
brew <span class="token function">install</span> pngquant webp
</code></pre></li>
<li>
<p><strong>CDN安全策略</strong><br>
必须启用SRI校验：</p>
<pre data-role="codeBlock" data-info="html" class="language-html html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> 
  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.example.com/vue.js<span class="token punctuation">"</span></span> 
  <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sha384-xxxx<span class="token punctuation">"</span></span>
  <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></li>
</ol>
<h3>💡 最佳实践建议</h3>
<ul>
<li>
<p><strong>分阶段优化</strong></p>
<div class="mermaid">graph LR
A[基础压缩] --&gt; B[代码分割]
B --&gt; C[图片优化]
C --&gt; D[PWA集成]
D --&gt; E[SSR优化]
</div></li>
<li>
<p><strong>渐进式加载策略</strong><br>
使用 <code>&lt;link rel="modulepreload"&gt;</code> 预加载关键资源：</p>
<pre data-role="codeBlock" data-info="html" class="language-html html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/src/main.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></li>
</ul>
<hr>
<center>🎉 通过以上优化策略，典型项目可减少 40%-70% 的构建体积，提升 3-5 倍加载速度！</center>
```
<blockquote>
<p>本指南持续更新，欢迎提交 PR 补充优化方案！<br>
最佳实践需结合项目实际情况调整，建议每次优化后通过 Lighthouse 验证效果。</p>
</blockquote>

      </div>
      
      
    
    
    <script type="module">
// TODO: If ZenUML gets integrated into mermaid in the future,
//      we can remove the following lines.


var MERMAID_CONFIG = ({"startOnLoad":false});
if (typeof MERMAID_CONFIG !== 'undefined') {
  MERMAID_CONFIG.startOnLoad = false
  MERMAID_CONFIG.cloneCssStyles = false
  MERMAID_CONFIG.theme = "default"
}

mermaid.initialize(MERMAID_CONFIG || {})
if (typeof(window['Reveal']) !== 'undefined') {
  function mermaidRevealHelper(event) {
    var currentSlide = event.currentSlide
    var diagrams = currentSlide.querySelectorAll('.mermaid')
    for (var i = 0; i < diagrams.length; i++) {
      var diagram = diagrams[i]
      if (!diagram.hasAttribute('data-processed')) {
        mermaid.init(null, diagram, ()=> {
          Reveal.slide(event.indexh, event.indexv)
        })
      }
    }
  }
  Reveal.addEventListener('slidetransitionend', mermaidRevealHelper)
  Reveal.addEventListener('ready', mermaidRevealHelper)
  await mermaid.run({
    nodes: document.querySelectorAll('.mermaid')
  })
} else {
  await mermaid.run({
    nodes: document.querySelectorAll('.mermaid')
  })
}
</script>
    
    
    
  
    </body></html>